---
export interface Props {
	labels: {
		label: string;
	};
}
const { labels = { label: 'WCAG Contrast Level' } } = Astro.props;
---

<contrast-level-toggle class="sl-flex">
	<fieldset class="not-content">
		<legend>{labels.label}</legend>
		<div class="sl-flex">
			<label class="sl-flex">
				<input type="radio" name="contrast-level" value="4.5" checked />
				AA
			</label>
			<label class="sl-flex">
				<input type="radio" name="contrast-level" value="7" />
				AAA
			</label>
		</div>
	</fieldset>
</contrast-level-toggle>

<script>
	import { minimumContrast } from './store';

	class ContrastLevelToggle extends HTMLElement {
		#fieldset = this.querySelector('fieldset')!;
		constructor() {
			super();
			this.#fieldset.addEventListener('input', (e) => {
				if (e.target instanceof HTMLInputElement) {
					const contrast = parseFloat(e.target.value);
					minimumContrast.set(contrast);
				}
			});
		}
	}

	customElements.define('contrast-level-toggle', ContrastLevelToggle);
</script>

<style>
	fieldset {
		border: 0;
		padding: 0;
	}
	fieldset > * {
		float: left;
		float: inline-start;
		vertical-align: middle;
	}
	legend {
		color: var(--sl-color-white);
		margin-inline-end: 0.75rem;
	}
	label {
		align-items: center;
		padding: 0.25rem 0.75rem;
		gap: 0.375rem;
		background-color: var(--sl-color-gray-6);
		font-size: var(--sl-text-xs);
		cursor: pointer;
	}
	label:has(:focus-visible) {
		outline: 2px solid;
		outline-offset: -4px;
	}
	label:first-child {
		border-start-start-radius: 99rem;
		border-end-start-radius: 99rem;
	}
	label:last-child {
		border-start-end-radius: 99rem;
		border-end-end-radius: 99rem;
	}
	label:has(:checked) {
		color: var(--sl-color-black);
		background-color: var(--sl-color-text-accent);
	}
	input:focus-visible {
		outline: none;
	}
</style>
